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Abstrak 

Proses belajar mengajar di dalam laboratorium merupakan kewajiban dalam 
pengajaran di bidang teknik khususnya bidang teknologi informasi (TI). Tetapi, tidak selamanya 
aktifitas praktikum di laboratorium dapat menjadi hal yang menarik bagi para mahasiswa, 
sehingga dosen wajib membuat latihan yang berbasis latihan. Tetapi, saat latihan sudah selesai 
dikerjakan, para dosen seringkali merasa kesulitan dalam mengumpulkan tiap tugas yang 
tersebar di komputer yang ada di lab. Melihat kendala tersebut, maka timbul gagasan untuk 
membuat sebuah aplikasi yang dapat membantu kegiatan praktikum di laboratorium komputer 
lebih nyaman bagi dosen dan mahasiswa. Terlebih untuk para dosen, sehingga dapat 
mengendalikan hasil praktikum dari mahasiswa serta dapat membatasi waktu dari latihan 
tersebut secara otomatis. Tetapi, dalam membangun sebuah aplikasi di bidang sistem informasi 
membutuhkan sebuah proses pendahuluan yang dinamakan modeling atau pemodelan. Dalam 
riset ini, selain dijelaskan mengenai rancang bangun dari sistem informasi yang ada di 
laboratorium termasuk didalamnya proses pemodelan. Sistem informasi yang dibangun ini, 
sekarang telah selesai dikerjakan dan digunakan dalam proses belajar mengajar. 
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Abstract 

Teaching learning process in laboratory is obligatory in engineering education 
especially for course in information technology (IT). To make laboratory activities become more 
interesting for the students, lecturers must build application-based exercise for the student, but 
after students accomplished their short exercise, it is found that lecturers got difficulty to compile 
and grade all the exercises. This paper is based on the idea how to overcome the problem 
above, in order to make activities in the laboratory comfortable for both lectures and student. It 
is expected that the lectures will able to fully control all practical activity and save the time 
automatically. To make approach to solve the problem in IT, a modeling process must be 
conducted first. There for, firstly, this paper explain the model approach for the problem above, 
then the IT design for practices in laboratory is described. The IT design to overcome the 
problem has been effectively applied in the real teaching learning process. 
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1. INTRODUCTION 

Laboratory activity in higher education is becoming an obligation especially in teaching 
technical courses in IT field. While in many universities try to propose creative computer 
laboratory activity during its implementation, there are also many barriers in creating such kind 
of teaching activities [1]. Therefore in Ma Chung University, especially in Information System 
study program, laboratory activity directly being conducted by the lecturer itself rather than give 
it to laboratory assistant. 

However, in order to make laboratory activity become more interesting for the students, 
lecturers must build application-based exercise for the students [2]. On the other hand, after 
students finish their short exercise, lecturers always have difficulty to gather them all. 
Particularly when the class size is big (more than 40 students at once) and it must be collected 
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one by one. Surely, this daily barrier can make lecturers waste their time only for gathering 
students’ exercises result. 

The importance of this interactive session is to create active involvement from students 
in laboratory activity. Since that active participation will generate better result for students of 
information system rather than passive activity such as one way communication [1]. However, 
empirically it still becomes another obstacle to produce such kind of activity. 

Looking out this kind of obstacle that seem to be not important but really make lecturers 
more desperate in dealing their daily activity, thus it blown up an idea to solve it. The main idea 
is how to make a simple interface application for students and also lecturers, thus they can do 
laboratory activity more enjoyable. Moreover, for the lecturers, they really can make the 
exercise more efficient, having great control for their students’ exercises result and also can limit 
class time. 

Computer laboratory as the main focus in this research should become not only as 
programming practice base camp for students, otherwise, it should also become a place to 
provide stimulating and maintaining interest of subject as well as fostering students’ critical 
awareness [2]. Thus, the application should also produce students’ awareness about their own 
activity rather than conventional method that already being done. 

Therefore, to implement this thought then it is considered that web based application 
would be the best choice. There is also empirical evidence stated that web based application 
should become great choice in laboratory activity that does not need big investment [3]. Since 
that web based application will not need any installation, thus it is going to be the most efficient 
way for the problem. It will be also better if it includes AJAX feature, hence it can make lecturers 
have control in limiting class time better. 

However, in building an information system we all must meet the requirement through 
exact modeling. Thus, in this research also includes modeling activity alongside the application 
building activity. Modeling itself utilized use case diagram as well as activity diagram to clarify 
what the application should be built. 

Use case diagram is part of UML or Unified Modeling Languange that has been a 
standard modeling language for software development since 1997 that developed by Grady 
Booch, James Rumbaugh, and Ivar Jacobson. UML as modeling language that has become 
standard would help many software projects from its failure. Unsuccessful software projects fail 
in their own unique ways, but all successful projects are alike in many ways. There are many 
elements that contribute to a successful software organization; one common thread is the use of 
modeling [4]. 

However, a business model can never be totally accurate or complete, simply because 
no two observers of a business will have an identical perception of the business or agree on an 
accurate model. As noted earlier, the business model cannot and should not contain all the 
details of the business. A model that attempts to do so risks becoming just as complex and as 
hard to comprehend as the business [5]. Thus, modeling should be simple nevertheless is must 
be also comprehensive for the audience. 

On the other hand, the main reason to use UML as business modeling merely based on 
ideal state of business modeling which are [5] : 

Must use well proven established technique 
Standard notation 
Short learning curve 
New and easier ways to view an organization or a business 

Since that the research used web based application, it used ASP .NET 3.5 in order to 
simplify the implementation, because the laboratory that being used as testing place uses 
Windows Server as its local file server. Therefore it is easier to deploy the web based 
application just by consume IIS feature inside its server. 

ASP .NET is part of .NET Framework or commonly called only as .NET. .NET is as a 
big control system with two key elements. First is the .NET framework class library. This library 
has thousands of classes organized into namespaces. This large set of classes was designed to 
provide all the class support for virtually any application a developer would want to create. This 
library is a repository of reusable types for object-oriented development. For example, 
System.Web.UI Namespace allows to create several different ASP.NET server controls and 
user interfaces [6]. 
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Second, and at the core of .NET, is the common language runtime. The runtime is a 
management agent for code as it executes. All of the services, such as memory and thread 
management and remoting, are handled by the .NET framework. For example, VB.NET has 
access to the same family of classes as does C#. It is designed to aid in strict type safety and 
other structures that secure both robustness and security. Microsoft refers to code that targets 
the common language runtime as managed code and refers to code that does not target the 
runtime as unmanaged code. [6,7]. 

Knowing that the application is using web based application, hence it need particular 
modeling in it. The main aim of modeling in web application is to fulfil a requirement 
specification, which is consists of document, database record and models, that attempt to 
unambiguously describe a software system to be built. Each document usually includes a 
description of the document's purpose, version number, contributors, and other administrative 
information, in addition to a list of specific system requirements. The specification can be a 
single document for small systems or can be distributed over multiple documents and 
databases. A system's requirements must always be available to nearly everyone connected to 
the project. An excellent way to do this is to make them available on an intranet via a Web 
server. If the application is going to be a Web application, the infrastructure for doing this is 
probably already in place [8]. 


2. RESEARCH METHOD 

This research tried to model the system using UML diagram, particularly use case 
diagram and activity diagram, as shown in Figure 1 and Figure 2, respectively. The diagrams 
should be able to clarify business process in the application, thus it can be more precise when 
developing phase being done. Figure 1 is representing use case diagram as common business 
process. 
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Figure 1. Use Case Diagram 





Web Based Laboratory Task-Submitter Application Model (Soetam Rizky Wicaksono) 


12 E ISSN: 1693-6930 


Laboratory Staff Students 
© Upload Course Material 


Maintenance Class Data Download Course Material 
Upload Task 


Give Access Privilege 







Have Privilege 


Download Task 









Check submitted task 


No 


Submit Task 


a 


Figure 2. Activity Diagram 


3. RESULT AND DISCUSSION 

The development process of this application previously initiated by modeling system 
and already shown in preceding sub chapter. The development itself utilized ASP .NET 3.5 on 
behalf of Visual Basic programming language that already include AJAX capability inside it. 

AJAX capability was used mainly to help time limitation feature in this application. Thus, 
when the students try to submit their task from certain course, they will have a live timer in their 
web browser. On the other hand, while AJAX capability in ASP .NET already put in a nutshell in 
a framework named as ASP .NET AJAX therefore it is easier to have it implemented in this 
application. 

In the application, there are three user levels that inherited from use case diagram 
which are: Students, Laboratory Staff and Lecturers. Students’ role, as it stated previously, can 
have privilege of downloading course material as well as submitting their task to their specific 
courses from certain lecturer. While lecturers have role that allow them to set up their own 
assignment and also uploading their course material. They also can download students’ 
assignments that have already been uploading via task submitter. 

The last role is for laboratory staff that act as an administrator for this application. 
Laboratory staff can handle data maintenance process for class arrangement, cleaning up 
garbage file and also resetting user password if there is any difficulty in login process. 
Laboratory staff can also add additional announcement for all roles or certain role, therefore it 
can make awareness for explicit process such as data backup or changes in application. 
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After grasping up the roles, then it can be generated into sitemaps that will represent 
each role in web based application. The sitemaps that also become the menu in web application 
are described in Figure 3, Figure 4 and Figure 5. 


v Maintenance Data 


b Courses b Log Presence b Home 
b Lecturers b Class List b Course and Assignment 
b Classes > Upload Material and Assignment > Submit Task 
> Study Program b Set Up Assignment b Set Password 
b Students b Download Students’ Assignment > Logout 
b Class Activity b Set Password 
b Students-Officer b Logout Figure 5. Sitemap menu for 
b Reports Students 
b Announcement Figure 4. Sitemap menu for 
v Utility Lecturer 


b Set Password 

b Reset Password User 

b Maintenance Admin 
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Figure 3. Sitemap menu for 
Laboratory Staff 


Header 


Main Part 





Figure 6. Layout for Master Pages 


In web based application development process, there are stages that have already 
completed to finish its developing process. Those stages are: 
1. Creating sitemap as menu 
Sitemap in ASP .NET is implemented as an XML file for each role, therefore it is not only a 
paper based model but it shows the real flow in website. The site implementation already 
declared in previous pictures as menus for each role. 
2. Develop Master Pages. 
Website implementation in ASP .NET can be handled as one big object template called 





Web Based Laboratory Task-Submitter Application Model (Soetam Rizky Wicaksono) 


14 m ISSN: 1693-6930 


Master Pages. In this application, only use one Master Pages to be the anchor of all web 
pages in the website. The Master Page itself uses a CSS (Cascading Style Sheet) file in 
order to create its layout. 
Layout of Master Pages in this website only consist of three parts, which are : header, main 
part and menu part. Header parts only hold the website’s logo, while menu part will become 
the container of menu from sitemap’s files. Main part itself become a Content Place Holder 
that will be the foremost container of other web pages. Layout structure of Master Page 
described in Figure 6. 

3. Implement database 
Database server that being used in this application is SQL Server 2005 Express Edition. 
The choice merely based on default database that come with ASP .NET and also that 
Express Edition is a free edition, thus it can be implemented without any additional cost at 
all. 

4. Implement database connection 
Database connection in this web application being prepared in configuration file of website. 
Using ADO .NET as part of INET Framework, whole connection in website simply being put 
at web.config file, hence it will be easier if in the future development database server is 
going to be upgraded in better database server such as SQL Server Enterprise Edition. 
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Figure 7. Screenshot Sample for Lecturers’ Class List 
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Figure 8. Screenshot Sample for Lecturers’ Upload Course Material 


5. Develop pages 
Web page development is consist of two main elements which are: web pages that has 
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functionality to view data, and web pages that has functionality to view as well as 
maintaining the data. Web pages which only can view data commonly composed of 
GridView component as its main component. While second type of web pages consist of 
GridView and also FormView that will give capability to insert and to edit data in tables. 
Each web pages sample can be seen in Figure 7 and Figure 8. 

Adding AJAX capability 

After all web pages have already being implemented and being tested as complete website, 
last step in development stages is adding AJAX capability. There are many AJAX 
frameworks that can be applied in a web application, however, ASP .NET already provide 
great built-in framework called ASP .NET AJAX. This easy and simple framework also 
comes with its additional extender that can be downloaded freely and come in open source 
format called AJAX Control Toolkit. 

Mainly, AJAX capability added into two core features which are Students’ task submitter 
and also Lecturer task downloader. In task submitter feature, AJAX being used as 
countdown timer and simplify uploading process, thus students will not have any difficulty to 
upload their task. While in task downloader feature, AJAX was applied in GridView that can 
handle downloading process, thus lecturers will not have to refresh their web pages 
whenever they want to download students’ task file. Screenshot of main feature can be 
seen in Figure 9. 
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Figure 9. Screenshot for AJAX Timer capability 


4. CONCLUSION AND FUTURE DEVELOPMENT 


After modeling and developing process finished for the application, there are some 


conclusions that can be drawn, which are: 


1. 


After website being tested, there are some minor requirements that must be revised in next 

phase. Those are: 

a. Upload assignment feature should be more precise in timer countdown calculation, thus 
it can be only seen in certain time that already being set up by lecturers. 

b. AJAX Timer can be deceived using date/time modification in client side; however, the 
timestamp already being noted in file upload log, therefore the trick is useless. 

AJAX capability can be crashed down whenever it is implemented in a component that need 

full postback process such as file deletion or file upload process. However, it can be solved 

using postback trigger property from ASP .NET AJAX. On the other hand, in a container 

based component like GridView, it can be modified as template field to solve this barrier [7]. 

Website already being implemented and being tested as local live application in laboratory, 

and so far there is no major revision needed from lecturers or students role. Thus it can be 

assumed that modeling of business process can fulfill user requirement [8]. 

On the other hand, eventhough the application only set up as exercise based application, in 

its testing and implementation it already can produce interactivity that can enlighten 

lecturers in creating scaffolded goal-based scenario. This scenario is common practice in 
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information system teaching technique that lead students understand computer laboratory 
faster and better [9]. 


Then in the future development of this web application, there are some modifications 


and additional features that can be made: 

1. Web application can be modified to meet SCORM standard, hence it can be integrated in e- 
learning portal that use the same standard. 

2. Web application can be merged into existing academic portal, thus students score can 
easily integrated in academic portal system. 

3. The application also become initiation step in creating collaborative learning project for 
researcher, since that the framework of the future project of collaborative learning will 
include this application as its start up step [10]. 
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